
<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>可控制宽度的文字跑马灯</title>
    <style>
    .marquee {
    display: flex;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    width: 200px;
    padding: 2px 4px;
    background-color: salmon;
    resize: horizontal;
    color: #fff;
    container-type: inline-size;
    margin: 200px auto;
    }
    .marquee > * {
    -webkit-animation: marquee 5s linear infinite both alternate;
            animation: marquee 5s linear infinite both alternate;
    }

    @-webkit-keyframes marquee {
    to {
        transform: translateX(min(100cqw - 100%, 0px));
    }
    }

    @keyframes marquee {
    to {
        transform: translateX(min(100cqw - 100%, 0px));
    }
    }
    </style>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="marquee">
	<span>Vue课程零基础开始，闯关式学习，死磕Vue3，大前端程序员速成必学！<span>
</div>
<!-- partial -->
  
</body>
</html>